<template>
	<div class="full-body">
		<!-- 工具栏 start -->
		<md-toolbar class="md-dense" md-elevation="4">
			<span class="md-title">{{getLangText(label.theTitle)}}</span>
			<span style="display:inline-flex;align-items:center;" class="md-toolbar-section-end">
				<span style="width:300px;display:inline-flex;height:48px;">
					<md-field style="margin:0;">
						<label>{{getLangText(label.searchTip)}}</label>
						<md-input v-model="searchKey"></md-input>
						<md-button class="md-icon-button" @click="searchPackage">
							<i class="iconfont iconsearch"></i>
						</md-button>
					</md-field>
				</span>
				<md-button
			class="md-icon-button"
			@click="loadPackage"	>
			<i class="iconfont iconrefresh"></i>
		</md-button>
			</span>
		</md-toolbar>
		<!-- 工具栏 end -->
		<!-- 卡片容器 start -->
		<div class="md-dense-body1">
			<md-card v-for="(item,idx) in dataList" :key="idx" v-show="dataList.length>0">
				<md-card-media-cover md-solid>
					<md-card-media md-ratio="16:9">
						<img src="@/assets/img/temp.jpg" alt="loading" />
					</md-card-media>
					<md-card-area>
						<md-card-header>
							<div class="md-title" style="white-space:nowrap;">{{item.title}}</div>
						</md-card-header>
					</md-card-area>
				</md-card-media-cover>
				<md-card-content>
					<div class="md-body-1">{{item.detail?item.detail:item.title}}</div>
				</md-card-content>
				<md-card-actions md-alignment="space-between">
					<span class="md-caption">{{item.update_time}}</span>

					<md-button class="md-icon-button" @click="showDetail(item)">
						<i class="iconfont iconPencil"></i>
					</md-button>

					<md-button class="md-icon-button" @click="deleteCard(idx)">
						<i class="iconfont iconshanchu"></i>
					</md-button>
				</md-card-actions>
			</md-card>

			<div v-if="dataList.length==0" class="list-nodata">{{getLangText(label.nodata)}}</div>
		</div>

		<md-dialog-confirm
			:md-active.sync="showDel"
			:md-title="getLangText(label.delTip)"
			:md-content="getLangText(label.datapackage)+(dataList[selectId]?dataList[selectId].source_id:'')"
			:md-confirm-text="getLangText(label.ok)"
			:md-cancel-text="getLangText(label.no)"
			@md-confirm="onDelConfirm"
		/>

		<md-dialog-alert :md-active.sync="isAlert" :md-content="alertTip" md-confirm-text="OK" />

		
	</div>
</template>
<script>
	export default {
		name: "DataPackage",
		props: {
			langType: {
				type: String,
				default: window.localStorage.getItem("langType")
			}
		},
		data: () => ({
			label: {
				theTitle: { zh: "数据包", en: "Data Package" },
				searchTip: { zh: "请输入搜索关键词", en: "Please input search key" },
				searchLength: {
					zh: "请输入至少两个关键词",
					en: "Please input at least 2 keywords"
				},
				delTip: {
					zh: "请问是否删除数据包?",
					en: "Are you sure to delete the datapackage?"
				},
				datapackage: { zh: "数据包ID:", en: "PackageId:" },
				ok: { zh: "确定", en: "OK" },
				no: { zh: "取消", en: "cancel" },
				nodata: { zh: "暂无数据包", en: "no data package" },
				loadFail: { zh: "加载数据包失败!", en: "Fail to load data package!" },
				deleteFail: { zh: "删除数据包失败!", en: "Fail to delete data package!" },
				deleteOk: { zh: "删除数据包成功!", en: "Succed to delete data package!" },
				searchFail: { zh: "搜索失败!", en: "Fail to search!" }
			},
			searchKey: "",
			dataList: [],
			selectId: 0,
			showDel: false,
			isAlert: false,
			alertTip: "",
			originList: ""
		}),
		watch: {
			searchKey() {
				if (!this.searchKey) {
					this.dataList = JSON.parse(this.originList);
				}
			}
		},
		methods: {
			searchPackage() {
				var that = this;
				if (this.searchKey && this.searchKey.length >= 2) {
					$.post(
						this.API.searchDataSource,
						{
							key: encodeURI(this.searchKey),
							userId:JSON.parse(window.localStorage.getItem("carweb_user")).userId
						},
						function(res) {
							if (res.errCode == 0) {
								for (var i = 0; i < res.data.length; i++) {
									res.data[i].title = decodeURI(res.data[i].title);
									res.data[i].detail = decodeURI(res.data[i].detail);
								}
								res.data = res.data.sort(function(a, b) {
									return (
										new Date(b.update_time).getTime() -
										new Date(a.update_time).getTime()
									);
								});
								that.dataList = res.data;
							} else {
								that.alertTip = that.getLangText(that.label.searchFail);
								that.isAlert = true;
							}
						}
					);
				} else {
					that.alertTip = that.getLangText(that.label.searchLength);
					that.isAlert = true;
				}
			},
			loadPackage() {
				var that = this;
				$.post(
					this.API.getDataSourceList,
					{ userId: JSON.parse(window.localStorage.getItem("carweb_user")).userId },
					function(res) {
						if (res.errCode == 0) {
							for (var i = 0; i < res.data.length; i++) {
								res.data[i].title = decodeURI(res.data[i].title);
								res.data[i].detail = decodeURI(res.data[i].detail);
							}
							res.data = res.data.sort(function(a, b) {
								return (
									new Date(b.update_time).getTime() -
									new Date(a.update_time).getTime()
								);
							});
							that.dataList = res.data;
							that.originList=JSON.stringify(res.data);
						} else {
							that.alertTip = that.getLangText(that.label.loadFail);
							that.isAlert = true;
						}
					}
				);
			},
			//显示模板详情
			showDetail(item) {
				window.open(
					window.location.origin +
						window.location.pathname +
						"#/datasource?sourceId=" +
						item.source_id
				);
			},

			//跳转到模板编辑界面
			editCard(item) {},
			//删除模板
			deleteCard(idx) {
				this.selectId = idx;
				this.showDel = true;
			},
			onDelConfirm() {
				var that = this;
				$.post(
					this.API.deleteDataSource,
					{
						userId:JSON.parse(window.localStorage.getItem("carweb_user")).userId,
						sourceId: this.dataList[this.selectId].source_id
					},
					function(res) {
						if (res.errCode == 0) {
							that.dataList.splice(that.selectId, 1);
							that.alertTip = that.getLangText(that.label.deleteOk);
						} else {
							that.alertTip = that.getLangText(that.label.deleteFail);
						}
						that.isAlert = true;
					}
				);
			}
		},
		mounted() {
			this.loadPackage();
		}
	};
</script>
<style lang="scss" scoped>
	.md-layout {
		height: 100%;
	}
	.md-app-content .md-card {
    width: calc(20% - 8px);
    margin: 4px !important;
    display: inline-block;
    vertical-align: top;
}
	.md-card-content,
	.md-card-header {
		padding: 8px;
	}
	.md-card-content {
		padding-bottom: 0px;
	}
</style>